
$(function () {
    function Magnifier() {
        this.small_img_ele = $(".small-img")
        this.big_img_ele = $("#detailPicDiv")
        this.big_img =$("#detailPicDiv img")
        this.focus_ele = $("#moveMask")
        this.container_ele = $(".pic_info .pic")

        this.container_offset = this.container_ele.offset()
        this.focus_size = {
            width: this.focus_ele.width(),
            height: this.focus_ele.height()
        }
    }
    Magnifier.prototype.bindEvent = function () {
        var mag = this
        this.small_img_ele.mouseover(function () {
            mag.toggle("show")
        })
        this.small_img_ele.mouseout(function () {
            mag.toggle("hide")
        })
        this.small_img_ele.mousemove(function (e = evt) {
            mag.focusMove(e.clientX, e.clientY);
            mag.bigImgMove();
        });
    }
    Magnifier.prototype.toggle = function (type) {
        switch (type) {
            case "show":
                this.big_img_ele.show();
                this.focus_ele.show()
                break;
            case "hide":
                this.big_img_ele.hide();
                this.focus_ele.hide()
                break;

        }
    }
    Magnifier.prototype.focusMove = function (x, y) {
        var _left = x - this.container_offset.left - this.focus_size.width / 2;
        var _top = y - this.container_offset.top - this.focus_size.height / 2
        if (_left < 0) {
            _left = 0;
        }
        if (_top < 0) {
            _top = 0;
        }
        if (_left > 160) {
            _left = 160;
        }
        if (_top > 160) {
            _top = 160;
        }
        this.focus_ele.css({
            left: _left,
            top: _top
        })
        this.prop_left = _left / 160;
        this.prop_top = _top / 160;
    }
    Magnifier.prototype.bigImgMove = function () {
        this.big_img.css({
            left: -this.prop_left * 800,
            top: -this.prop_top * 800
        })
    }
    var m = new Magnifier();
    m.bindEvent();
})


